<script setup>
	import {
		reactive,
		watch,
		ref
	} from 'vue'
	import {
		jumpTo,
		navigateTo
	} from '@/utils/common.js'

	import http from '@/api/roomAPI'
	import userAPI from '@/api/userAPI'
	import chatsApi from "@/api/chatsApi"

	import {
		useStore
	} from "@/stores/index"
	const userStore = useStore()

	const props = defineProps({
		days: Number,
		default: 0
	})

	const uToast1 = ref(null);

	const data = reactive({
		btnText: "",
		btnLoading: false,
		btnDisabled: false,
		btnType: 0,
		btnStyle: {},

		statusTimer: null,

		examination: {
			is_qualified: 0,
			is_press: 0,
			is_post: 0,
			days: 0
		},

		statusMap: [
			/**
			 * type:
			 * 1->开始
			 * 2->暂停
			 */
			{
				type: 1,
				btn: '开始',
				tip: '',
			},
			{
				type: 0,
				btn: '请前往1Day 点击开始 正式进入定制',
				tip: '',
			},
			{
				type: 0,
				btn: '倒计时 ${time()}分钟后将正式开启定制',
				tip: `
            1Day定制将于明日中午12时正式开启
请务必在凌晨12时完成需求填写（放心 在凌晨12时填写需求后 在中午11:59
分之前都可以修改完善 中午11:59分锁定需求）
但你必须在凌晨12时之前完成首次需求填写 否则你的本次定制将作废`,
			},
			{
				type: 2,
				btn: '正在进行中/暂停',
				tip: '你只有一次暂停机会',
			},
			{
				type: 1,
				btn: '手动再次开启定制',
				tip: '自动再次开启定制倒计时',
			},
			{
				type: 0,
				btn: '倒计时 ${time()}分钟后将再次开启定制',
				tip: '',
			},
			{
				type: 0,
				btn: '暂停后的再次开启 正在进行中',
				tip: '已无暂停权限',
			},
			{
				// 7
				type: 0,
				btn: '本天定制已结束',
				tip: '',
				background: '#bf9000',
				color: '#fff',
			},
			{
				type: 0,
				btn: '整体定制已暂停',
				tip: '请在暂停当天的进行界面 手动再次开启定制',
			},
			{
				// 9
				type: 0,
				btn: '倒计时 ${time()}分钟后将正式开启定制',
				tip: '',
			},
		],
		userInfo: userStore.user.userInfo,
		current: 0,
		data: {},
		status: {},
		timer: null,
		//服务状态
		serviceStatus: {
			now_time: 0,
			status: 0,
			days: 0,
			text: '',
			time: 0,
			open_time: 0
		},

		timeData: {},

		remind: 0, //是否提醒有新消息
		usertofid: {
			to_user_id: 0, // 根据天数获取交付人员
			is_chat: 0,
			is_post: 0
		},
		customStyle: {
			background: '#bf9000',
			color: '#fff'
		}
	})

	watch(
		() => props.days,
		(val) => {
			data.current = +val;
			getBanner(val)
			getStatus()
		}, {
			immediate: true
		}
	)

	function getTime(data, isFirst) {
		if (!isFirst) {
			data.time -= 60
		}
		// console.log('🚀 ~ time ~ data.time:', data.time)
		if (data.time <= 0) {
			// clearInterval(data.timer)
			// getStatus()
			return 0
		}
		return parseInt(data.time / 60)
	}

	async function getBanner(days) {
		const res = await http.getBanner(days)
		data.data = res.data
		// console.log('🚀 ~ getBanner ~ res:', res)
	}

	//获取需求详情
	async function getExaminationInfo(days) {
		const res = await userAPI.getExaminationInfo(days)

		data.examination = res.data;
	}

	async function getRemind() {
		const res = await chatsApi.getRemind();

		data.remind = res.data.remind;
	}

	async function getUsertofid(days) {
		const res = await chatsApi.getUsertofid(days);
		data.usertofid = res.data;
	}

	// 点击按钮
	async function onClick() {
		// console.log(type)

		switch (data.btnType) {
			case 1:
				data.btnLoading = true;
				await start()
				data.btnLoading = false;
				break
			case 2:
				data.btnLoading = true;
				await pause()
				data.btnLoading = false;
				break
			default:

				uToast1.value.show({
					title: '暂无处理权限',
					type: 'default'
				})

				// uni.showToast({
				// 	title: '暂无处理权限',
				// 	icon: 'none',
				// })
		}
	}

	// 点击开始
	async function start() {
		await http.start()
		await getStatus()
	}
	// 暂停
	async function pause() {

		uni.showModal({
			title: '提示',
			content: '是否确认暂停?',
			success: async function(res) {
				if (res.confirm) {
					await http.pause()
					await getStatus()

				} else if (res.cancel) {

				}
			}
		});


	}

	async function getStatus() {
		// res.data.status = 1
		// res.data.time = 0
		const days = +props.days;


		const res = await http.getStatus(days)
		// if (res.data.status === 0 && res.data.days === 0) {
		// 	res.data.days = 1
		// }

		data.serviceStatus = res.data;

		//获取需求详情
		await getExaminationInfo(days);

		await getRemind();

		await getUsertofid(days)

		data.btnStyle = {};

		// data.tip1 = "";
		// data.tip2 = "";
		// data.tip3 = "";


		data.btnText = data.serviceStatus.button_text

		if (data.examination.is_stop == 3) {
			// data.btnText = "已停止 联系管理员"
			// data.tip1 = "因您未在指定时间内提交最终需求，已被暂停，您可以联系人工申诉获得1次激活机会";
			data.btnDisabled = true;
			data.btnType = 0;
		} else {

			if (data.serviceStatus.days == days || (data.serviceStatus.days == 0 && days == 1)) {
				today(data.serviceStatus) //今天
			} else if (data.serviceStatus.days > days) {
				yesterday(data.serviceStatus) //昨天
				// data.tip1 = `请前往Day${data.serviceStatus.days} 点击开始 正式进入定制`
			} else {
				tomorrow(data.serviceStatus) //明天
			}
		}




		// if (res.data.status === 0 && res.data.days === 0) {
		// 	res.data.days = 1
		// }
		// if (props.date < res.data.days) {
		// 	yesterday(res)
		// } else if (+res.data.days === +props.date) {
		// 	today(res)
		// } else {
		// 	tomorrow(res)
		// }
	}

	function onTimeChange(e) {
		data.timeData = e
	}

	//进入定制室
	function onCustomizedRoom() {

		// 3、只要用户day1已暂停，其他天数显示：整体定制已暂停
		// 4、只要用户不提交需求，或者不在规定时间内提交需求，就会被暂停，其他天数也会显示整体定制被暂停


		// v-if="data.serviceStatus.time==0"

		const currDays = +props.days;

		const {
			is_qualified,
			is_post
		} = data.examination;

		const {
			status,
			open_time,
			days
		} = data.serviceStatus;

		if (days == currDays) {

			// 2、用户只要暂停，需求表和定制室都无法进入
			if (status == 2 || status == 4) {
				// uni.showToast({
				// 	title: "您已暂停定制",
				// 	icon: 'none',
				// 	duration: 2000
				// });

				uToast1.value.show({
					title: '您已暂停定制',
					type: 'default'
				})

			} else {

				if (status > 0) {

					// 1、用户只有提交需求并通过后才能打开定制室，收到定制消息。
					if (is_post == 1 && is_qualified == 1) {

						if (open_time == 0) {

							if (data.usertofid.is_post == 0 || data.usertofid.to_user_id > 0) {
								navigateTo('/pages/exclusive/private?days=' + currDays)
							} else {
								// uni.showToast({
								// 	title: "您已暂停定制",
								// 	icon: 'none',
								// 	duration: 2000
								// });

								uToast1.value.show({
									title: '您已暂停定制',
									type: 'default'
								})
							}
							// else {
							// 	navigateTo('/pages/exclusive/public?days=' + days)
							// }
						} else {
							// uni.showToast({
							// 	title: "定制室于每日15点开放",
							// 	icon: 'none',
							// 	duration: 2000
							// });

							uToast1.value.show({
								title: '定制室于每日15点开放',
								type: 'default'
							})

						}
					} else {
						// uni.showToast({
						// 	title: "只有提交需求并被通过后，方可进入定制室查收定制消息",
						// 	icon: 'none',
						// 	duration: 2000
						// });

						uToast1.value.show({
							title: '只有提交需求并被通过后，方可进入定制室查收定制消息',
							type: 'default'
						})
					}

				} else {
					// uni.showToast({
					// 	title: "您还未开始定制",
					// 	icon: 'none',
					// 	duration: 2000
					// });

					uToast1.value.show({
						title: '您还未开始定制',
						type: 'default'
					})
				}
			}
		} else if (days > currDays) {
			if (data.usertofid.to_user_id > 0) {
				navigateTo('/pages/exclusive/private?days=' + currDays)
			} else {
				// uni.showToast({
				// 	title: "您已暂停定制",
				// 	icon: 'none',
				// 	duration: 2000
				// });

				uToast1.value.show({
					title: '您已暂停定制',
					type: 'default'
				})
			}
		} else {
			if (status == 2 || status == 4) {
				// uni.showToast({
				// 	title: "您已暂停定制",
				// 	icon: 'none',
				// 	duration: 2000
				// });

				uToast1.value.show({
					title: '您已暂停定制',
					type: 'default'
				})

			} else {
				// uni.showToast({
				// 	title: "定制室于每日15点开放",
				// 	icon: 'none',
				// 	duration: 2000
				// });

				uToast1.value.show({
					title: '定制室于每日15点开放',
					type: 'default'
				})
			}
		}

		// if (data.serviceStatus.days == days && data.serviceStatus.status > 0) {
		// 	if (data.serviceStatus.open_time == 0) {

		// 		if (data.usertofid.to_user_id > 0) {
		// 			navigateTo('/pages/exclusive/private?days=' + days)
		// 		} else {
		// 			uni.showToast({
		// 				title: "您已暂停定制",
		// 				icon: 'none',
		// 				duration: 2000
		// 			});
		// 		}
		// 		// else {
		// 		// 	navigateTo('/pages/exclusive/public?days=' + days)
		// 		// }
		// 	} else {
		// 		uni.showToast({
		// 			title: "定制室于每日15点开放",
		// 			icon: 'none',
		// 			duration: 2000
		// 		});

		// 	}
		// } else if (data.serviceStatus.days > days) {

		// 	if (data.usertofid.to_user_id > 0) {
		// 		navigateTo('/pages/exclusive/private?days=' + days)
		// 	} else {
		// 		uni.showToast({
		// 			title: "您已暂停定制",
		// 			icon: 'none',
		// 			duration: 2000
		// 		});
		// 	}
		// 	// else {
		// 	// 	navigateTo('/pages/exclusive/public?days=' + days)
		// 	// }

		// 	// uni.showToast({
		// 	// 	title: "在开始后，定制室才可以点击进入",
		// 	// 	icon: 'none',
		// 	// 	duration: 2000
		// 	// });

		// 	// navigateTo('/pages/exclusive/private?days=' + days)
		// } else {
		// 	uni.showToast({
		// 		title: "定制室于每日15点开放",
		// 		icon: 'none',
		// 		duration: 2000
		// 	});
		// }
	}

	//昨天
	function yesterday() {
		// data.btnText = "本天定制已结束"
		data.btnStyle = {
			background: '#bf9000',
			color: '#fff',
		}
		data.btnDisabled = true;
		data.btnType = 0;
	}

	//今天
	function today(service) {
		const {
			status,
			days,
			time
		} = service;
		//0：未开始 1：进行中 2：已暂停 3：重新开发 无暂停权限 4：已停止 联系管理员 5：定制结束

		if (data.examination.is_stop == 1) {
			// data.btnText = "已停止 可手动激活"
			// data.tip1 = "暂信日起7天内未手动开启，定制将自动失效。";
			// data.tip2 = ""

			data.btnDisabled = false;
			data.btnType = 1;
			data.tip3 = ""
		} else {
			switch (status) {
				case 0:
					// data.btnText = "开始定制"
					data.btnDisabled = false
					data.btnType = 1
					break;
				case 1:
					// data.btnText = "正在进行中/暂停"
					// data.tip1 = "您有1次暂停机会"

					const date = new Date(service.now_time * 1000); // 参数需要毫秒数，所以这里将秒数乘于 1000
					const currHours = date.getHours();

					// if (service.time > 0) {
					// 	data.tip2 = `倒计时 ${getTime(service, true).toString()}分钟后将正式开启定制`
					// }

					// 	if (currHours > 12) {
					// 		data.tip3 = "请于明天中午12:00前提交需求"
					// 	} else {
					// 		data.tip3 = "请于今天中午12:00前提交需求"
					// 	}
					// } else {
					// 	if (currHours > 12) {
					// 		data.tip3 = "请于明天中午12:00前提交需求"
					// 	} else {
					// 		data.tip3 = "请于今天中午12:00前提交需求"
					// 	}
					// }

					data.btnDisabled = false
					data.btnType = 2

					// clearInterval(data.timer)
					// data.timer = setInterval(() => {
					// 	data.tip2 = `倒计时 ${getTime(service).toString()}分钟后将正式开启定制`
					// }, 1000 * 60)

					break;
				case 2:
					// data.btnText = "已暂停/手动再次开启定制"

					// data.tip1 = "自动再次开启定制倒计时"
					// data.tip2 = "暂停之日起7天内未手动重启，您的定制将自动失效"
					data.btnDisabled = false;
					data.btnType = 1;
					break;
				case 3:
					// data.btnText = `您已重新激活/正在进行中`
					// data.tip1 = "最后开启权限使用完毕"

					// if (service.time > 0) {
					// 	data.tip2 = `倒计时 ${getTime(service, true).toString()}分钟后将正式开启定制`

					// }
					data.btnDisabled = false;
					data.btnType = 0;

					// const date = new Date(service.now_time * 1000); // 参数需要毫秒数，所以这里将秒数乘于 1000
					// const currHours = date.getHours();

					// if (currHours > 12) {
					// 	data.tip3 = "请于明天中午12:00前提交需求"
					// } else {
					// 	data.tip3 = ""
					// }

					// data.tip3 = ""
					break;
				case 4:
					// data.btnText = "已停止 联系管理员"
					// data.tip1 = "无操作权限";
					// data.tip2 = "人工申诉，可重新激活一次"

					data.btnDisabled = true;
					data.btnType = 0;
					// data.tip3 = ""
					break;
				case 5:
					// data.btnText = "定制结束"

					// data.tip1 = "";
					// data.tip2 = "";
					// data.tip3 = ""
					data.btnDisabled = true;
					data.btnType = 0;
					break;
			}
		}
	}

	//明天
	function tomorrow() {
		// data.tip1="整体定制已暂停，请在暂停的当天页面，手动再次开启定制"
		data.btnDisabled = true;
		data.btnStyle = {};
		data.btnType = 0;

		if (data.examination.is_stop == 1) {
			// data.btnText = "整体定制已暂停"
			// data.tip1 = `请前往Day${data.serviceStatus.days} 手动再次开启定制`
		} else {
			// data.btnText = "未开始"
			// data.tip1 = `请前往Day${data.serviceStatus.days} 点击开始(同时需求表和定制室都无法点击进入)`
		}
	}

	// // 当天
	// function today(res) {
	// 	switch (res.data.status) {
	// 		case 0:
	// 			data.current = 0
	// 			break
	// 		case 1:
	// 			if (res.data.time !== 0) {
	// 				if (+res.data.days === 1) {
	// 					// 第一天
	// 					data.current = 2
	// 				} else {
	// 					data.current = 9
	// 				}
	// 				data.statusMap[data.current].btn = `倒计时 ${time(res.data, true).toString()}分钟后将正式开启定制`
	// 				clearInterval(data.timer)
	// 				data.timer = setInterval(() => {
	// 					data.statusMap[data.current].btn = `倒计时 ${time(res.data).toString()}分钟后将正式开启定制`
	// 				}, 1000 * 60)
	// 			} else {
	// 				data.current = 3
	// 			}
	// 			break
	// 		case 2:
	// 			// 手动再次开启定制
	// 			data.current = 4
	// 			break
	// 		case 3:
	// 			if (res.data.time !== 0) {
	// 				data.current = 5
	// 				data.statusMap[data.current].btn = `倒计时 ${time(res.data, true).toString()}分钟后将再次开启定制`
	// 				clearInterval(data.timer)
	// 				data.timer = setInterval(() => {
	// 					data.statusMap[data.current].btn = `倒计时 ${time(res.data).toString()}分钟后将再次开启定制`
	// 				}, 1000 * 60)
	// 			} else {
	// 				data.current = 6
	// 			}
	// 			break
	// 	}
	// }
	// 昨天前
	// function yesterday(res) {
	// 	switch (res.data.status) {
	// 		case 0:
	// 			data.current = 1
	// 			break
	// 		case 1:
	// 			data.current = 7
	// 			break
	// 		case 2:
	// 			// 暂停中
	// 			data.current = 8
	// 			break
	// 		case 3:
	// 			data.current = 6
	// 			break
	// 		case 4:
	// 			// 被中断
	// 			break
	// 		case 5:
	// 			data.current = 7
	// 			break
	// 	}
	// }
	// 明天后
	// function tomorrow(res) {
	// 	const minute = 60 * 24 * (props.date - res.data.days)
	// 	switch (res.data.status) {
	// 		case 0:
	// 			data.current = 1
	// 			break
	// 		case 1:
	// 			data.current = 9
	// 			data.statusMap[data.current].btn = `倒计时 ${minute + time(res.data, true)}分钟后将正式开启定制`
	// 			clearInterval(data.timer)
	// 			data.timer = setInterval(() => {
	// 				data.statusMap[data.current].btn = `倒计时 ${minute + time(res.data)}分钟后将正式开启定制`
	// 			}, 1000 * 60)
	// 			break
	// 		case 2:
	// 			// 暂停中
	// 			data.current = 8
	// 			break
	// 		case 3:
	// 			data.current = 9
	// 			data.statusMap[data.current].btn = `倒计时 ${minute + time(res.data, true)}分钟后将正式开启定制`
	// 			clearInterval(data.timer)
	// 			data.timer = setInterval(() => {
	// 				data.statusMap[data.current].btn = `倒计时 ${minute + time(res.data)}分钟后将正式开启定制`
	// 			}, 1000 * 60)
	// 			break
	// 		case 4:
	// 			// 被中断
	// 			break
	// 		case 5:
	// 			data.current = 7
	// 			break
	// 	}
	// }

	//需求详情
	function onExamination() {

		const currDays = +props.days;

		// const {
		// 	status,
		// 	days
		// } = data.serviceStatus;

		navigateTo('/pages/room/customize?days=' + currDays)

		// const {

		// } = data.examination;

		// if (days == currDays) {
		// 	// 2、用户只要暂停，需求表和定制室都无法进入
		// 	if (status == 2 || status == 4) {
		// 		uni.showToast({
		// 			title: "您已暂停定制",
		// 			icon: 'none',
		// 			duration: 2000
		// 		});
		// 	} else {
		// 		navigateTo('/pages/room/customize?days=0')
		// 	}
		// } else if (days > currDays) {
		// 	navigateTo('/pages/room/customize?days=' + currDays)
		// } else {
		// 	let curr = 0;
		// 	if (days == 0 || days == undefined) {
		// 		curr = 1
		// 	} else {
		// 		curr = days
		// 	}

		// 	uni.showToast({
		// 		title: `请前往day${curr}定制`,
		// 		icon: 'none',
		// 		duration: 2000
		// 	});
		// }
	}

	defineExpose({
		getStatus
	})
</script>

<template>
	<image class="banner" :src="data.data.url" mode="widthFix" />
	<view class="text-box">
		<view class="logo">
			<text>IVMCR\n</text>
			<text> · 7 DAYS</text>
		</view>

		<view style="margin-top: 10rpx;text-align: center; padding-left: 40rpx;">
			<text class="text" v-if="data.data.title">
				{{ data.data.title.replace(/\\n/g,'\n') }}
			</text>
		</view>

	</view>
	<text class="tip" style="margin-left: 28rpx;">请点击下方开始按键 正式开启IVMCR·7DAYS</text>


	<!-- 	<button class="btn" :style="data.statusMap[data.current]" @click="onClick(data.statusMap[data.current].type)">
		{{ data.statusMap[data.current].btn }}
	</button> -->
	<view style="text-align: center;padding: 40rpx 0 0;font-weight: 700;" v-if="data.serviceStatus.days == 8">
		<u-button size="mini" class="btn" :hair-line="false" :ripple="true" shape="square"
			:custom-style="data.customStyle" :disabled="true">整体定制已结束</u-button>
	</view>
	<view v-else>
		<view style="text-align: center;padding: 40rpx 0 0;">
			<u-button size="mini" class="btn" :hair-line="false" :ripple="true" @click="onClick" shape="square"
				:custom-style="data.btnStyle" :loading="data.btnLoading"
				:disabled="data.btnDisabled">{{data.btnText}}</u-button>
		</view>

		<text class="tip2" v-if="data.serviceStatus.text">
			{{data.serviceStatus.text.replace(/\\n/g,'\n')}}
		</text>
	</view>


	<template v-if="data.serviceStatus.time>0">
		<u-count-down :timestamp="data.serviceStatus.time * 1000" format="DD:HH:mm:ss" autoStart @change="onTimeChange">
			<view class="time">
				<text class="time__item">倒计时&nbsp;</text>
				<text class="time__item">{{ data.timeData.days }}天</text>
				<text class="time__item">{{ data.timeData.hours>10?data.timeData.hours:'0'+data.timeData.hours}}时</text>
				<text class="time__item">{{ data.timeData.minutes }}分</text>
				<text class="time__item">{{ data.timeData.seconds }}秒&nbsp;</text>
				<text class="time__item">后将正式开启定制</text>
			</view>
		</u-count-down>
	</template>


	<!-- 	<view class="tip2" v-if="data.tip2">
		{{data.tip2}}
	</view> -->

	<!-- <view class="tip2" v-if="data.tip3">
		{{data.tip3}}
	</view> -->


	<!-- <text class="tip2" v-if="!!data.statusMap[data.current].tip">{{ data.statusMap[data.current].tip }}</text> -->


	<!-- 功能 -->
	<view class="function-box">
		<view class="function" @click="onExamination">
			<text class="tip3" v-if="data.examination.is_press==1">请尽快填写需求</text>
			<text class="tip3" v-else-if="data.examination.is_qualified==2">需求被驳回,请重新填写需求</text>
			<image src="/static/icon/function1.png" mode="aspectFit" />
			<view class="text">
				<view style="padding-bottom:10rpx;font-size: 22rpx;">
					所需定制方向与需求深度填写
				</view>
				<text>
					Fill in the required customization\n direction and depth of requirements
				</text>
			</view>
		</view>
		<view class="function" @click="onCustomizedRoom">
			<text class="tip3" style="background-color: #c18813;"
				v-if="data.remind ==1 && !(data.serviceStatus.status ==2 || data.serviceStatus.status ==4)">请查看定制消息</text>
			<image src="/static/icon/function2.png" mode="aspectFit" />
			<view class="text">
				<view style="padding-bottom: 10rpx;font-size: 22rpx;">定制室</view>
				<text>Customized Room</text>
			</view>
		</view>
		<view class="function" style="align-items: flex-start;" @click="jumpTo('/pages/room/depth?days=' + props.days)">
			<image src="/static/icon/function3.jpg" mode="aspectFit"
				style="border: 1px solid #d5d5d5;border-radius: 20rpx;" />
			<view class="text" style="padding-top: 2rpx;">
				<view style="padding-bottom: 4rpx;font-size: 22rpx;">IVMCR创始人 敬雄占祖</view>
				<view style="padding-bottom: 10rpx;font-size: 22rpx;">亲自准备的此版块定制的前置化深度内容</view>
				<text>Founder of IVMCR, Jing Xiang, Zhanzu\n
					Pre customized in-depth content\n personally prepared for this section</text>
			</view>
		</view>
		<u-toast ref="uToast1" />
	</view>
	<view style="height: 1rpx" />

</template>

<style lang="scss" scoped>
	.banner {
		display: block;
		width: 100%;
	}



	.text-box {
		position: relative;
		padding-top: 42rpx;
		text-align: center;

		.logo {
			position: absolute;
			left: 28rpx;
			color: rgb(0, 0, 0);
			font-size: 16rpx;
			font-weight: 600;
			line-height: 22rpx;
			text-align: left;

			>text:first-child {
				letter-spacing: 6rpx;
			}
		}

		.text {
			// display: inline-block;
			color: rgb(0, 0, 0);
			font-size: 18rpx;
			font-weight: 600;
			line-height: 24rpx;

		}
	}

	.tip {
		margin-top: 14rpx;
		display: block;
		color: rgb(0, 0, 0);
		font-size: 20rpx;
		font-weight: 600;
		line-height: 22rpx;
		text-align: center;
	}

	.btn {
		margin-top: 66rpx;
		width: fit-content;
		min-width: 86rpx;
		padding: 14rpx 16rpx;
		color: rgb(0, 0, 0);
		font-family: PingFang;
		font-size: 16rpx;
		font-weight: 600;
		line-height: 20rpx;
		text-align: center;
		box-sizing: border-box;
		border: 0;
		overflow: visible;

		&.done {
			background: #bf9000;
			color: #fff;
		}
	}

	.time {
		margin-top: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&__item {
			color: #000000;
			font-size: 16rpx;
			font-weight: 600;
			line-height: 1.25;
			text-align: center;
		}
	}

	.tip2 {
		display: block;
		margin-top: 12rpx;
		width: 100%;
		color: rgb(0, 0, 0);
		font-size: 18rpx;
		font-weight: 600;
		line-height: 1.0;
		text-align: center;
	}

	.function-box {
		padding-left: 56rpx;
		padding-top: 70rpx;

		.function {
			position: relative;
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;

			>image {
				width: 86rpx;
				height: 86rpx;
			}

			.text {
				// width: 230rpx;
				margin-left: 10rpx;
				color: rgb(0, 0, 0);
				font-size: 16rpx;
				font-weight: 600;
				line-height: 1.1;
				text-align: left;
			}

			.tip3 {
				margin: 0;
				position: absolute;
				top: -36rpx;
				left: 100rpx;
				// width: 137rpx;
				padding-left: 10rpx;
				padding-right: 10rpx;
				height: 42rpx;
				border-radius: 8rpx;
				background: rgb(192, 0, 3);
				color: rgb(255, 255, 255);
				font-size: 18rpx;
				font-weight: 500;
				line-height: 42rpx;
				text-align: center;
			}
		}
	}
</style>